<template>
  <ul class="service-list">
    <li
      v-for="service in services"
      :key="service.name"
    >
      <ServiceTitle
        :space="space"
        :service="service.name"
        :service-label="service.label"
        :with-paths="false"
      />
      <p>{{service.introduce}}</p>
      <section class="infos">
        <span>{{service.pluginCount}} {{$t('service.plugins')}}</span>
        <span>|</span>
        <span>{{$t('service.latestVersion')}}: {{service.lastVersion}}</span>
      </section>
      <div class="price-wrap">
        <p class="text-info-1 text-mini">{{$t('service.lastPublish')}}: {{getDateOffsetText(service.lastPublish)}}</p>
        <BeanAmount :price="service.price.price" :type="service.price.leaseType"/>
      </div>
    </li>
  </ul>
</template>

<script>
import BeanAmount from "../common/BeanAmount.vue";
import ServiceTitle from "./ServiceTitle.vue";

export default {
  name: "ServiceList",
  components: {ServiceTitle, BeanAmount},
  props: {
    space: {
      require: true
    },
    services: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped lang="scss">
.service-list {
  display: flex;
  flex-wrap: wrap;
  & > li {
    width: 325px;
    margin-right: 10px;
    border: 1px solid var(--border-default-color);
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    transition: all ease .15s;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    .service-title {
      margin-bottom: 10px;
    }
    & > p {
      font-size: var(--font-size);
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .infos {
      display: flex;
      margin-top: 10px;
      font-size: var(--font-size-mini);
      span {
        margin-right: 10px;
        color: var(--color-gray);
      }
    }
    .price-wrap {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
    }
    .opera {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
